<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="物品名称">
          <el-input v-model="itemName" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="type" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item label="规格" required>
          <el-input v-model="spec" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="数量" required>
          <el-input v-model="num" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item label="申请人" required>
          <el-input v-model="applicant" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
          <el-input v-model="bhreason" size="mini"></el-input>
        </el-form-item>

        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="fourShow">
              <h3>四级审批</h3>
              <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <p style="font-size: 15px ;justify-content: center">抄送人：</p>
            <van-image src="http://wework.qpic.cn/wwhead/duc2TvpEgSSWiaVLaJnssaQhAwV9wqgTueeE8IC2UCp8BG20aDWFTWZZ895sRylCibRzNRMoGqJ3w/0" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">邹威</p>
            </van-image>
          </van-steps>
        </div>

        <van-dialog title="   " v-model="bhshow" show-cancel-button :before-close="chargeBtn" message-align="left">
          <el-form-item label="驳回原因" required>
            <el-input v-model="bhreason" type="textarea" :autosize="{ minRows: 4}"></el-input>
          </el-form-item>
        </van-dialog>


        <el-form-item>
          <el-button id="isAgree" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      itemName:"",
      type:'',
      spec:'',
      num:'',
      applicant:'',
      nowUser:"",
      bhreason:"",
      bhshow:false,
      id:'',
      active:"-1",//步骤索引,从0开始
      isShow:false,
      message:'同意',
      message1:'驳回',
      oneShow:false,
      twoShow:false,
      threeShow:false,
      fourShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],
      fourspusers:[],
    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    //    alert(JSON.parse(localStorage.getItem('userInfo')).userId);
    this.id=this.$route.params.scrapDetailId;
    this.selLeaderByApplicaId();
    this.getDetail();//找到对应的页面详情，及领导信息
  },

  methods: {

    //根据招聘申请的id找到对应的leader
    selLeaderByApplicaId(){
      this.$https.post('/mobiles/getScrapLeader', {
        id:this.id
      }).then((res)=>{
        //展示审批流程
        if (res.data.data.onespusers && res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.data.twospusers && res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.data.threespusers && res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }
        if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourspusers=res.data.data.fourspusers;
        }else{
          this.fourShow=false;
          this.fourspusers=[];
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //根据传递的招聘申请id获取相应的申请信息
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/getPhotographScrapDetail', {
        userId:this.nowUser,
        id:this.id,
      }).then((res)=>{
        this.itemName = res.data.data.itemName;
        this.type = res.data.data.type;
        this.spec = res.data.data.spec;
        this.num = res.data.data.num;
        this.applicant = res.data.data.applicant;
        if (res.data.data.agree=='同意'){
          this.message='已同意';
          this.isShow=true;
        }else if (res.data.data.agree=='拒绝'){
          this.message1='已驳回';
          this.isShow=true;
          document.getElementById("bhreason").style.display= "";
          this.bhreason=res.data.data.bhreason;
        }else {
          if (res.data.data.showAgree=="0"){
            this.message='已同意';
            this.isShow=true;
          }
        }
        console.log(res.data.data.state)
        this.active=res.data.data.state-1;
        // this.active=1;


      }).catch(err => {
        console.log(err);
      })
    },


    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交同意
    submitAgree() {
      this.isShow=true;
      this.$https.post('/mobiles/isAgreePhotographScrap', {
        userId:this.nowUser,
        id:this.id,
      }).then(res => {
        res;
        Toast("已同意");
        this.message='已同意';
        this.isShow=true;
        this.getDetail();//找到对应的页面详情，及领导信息
        //JSON.parse(localStorage.getItem('userInfo')).userId;
        //this.$router.go(-1);

      }).catch(err => {
        console.log(err)
      });
    },

    //驳回
    submitNotAgree() {
      this.bhshow=true;
    },
    chargeBtn(action,done){
      if (action==='cancel'){
        done();
      }else if (action==='confirm'){
        this.show=false;
        this.$https.post('/mobiles/isAgreePhotographScrap', {
          userId:this.nowUser,
          id:this.id,
          bhreason:this.bhreason,
        }).then(res => {
          res;
          Toast("已驳回");
          this.message1="已驳回";
          this.isShow=true;
          this.getDetail();//找到对应的页面详情，及领导信息
          done();
        }).catch(err => {
          console.log(err)
        });
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>
